<template>
  <div class="app-container">
    <!--    <el-button   class="filter-item marginRB10" type="primary" icon="el-icon-plus" @click="handleCreate()">添加</el-button>-->
    <!--    <el-button class="marginRB10" type="danger" @click="allDel()" plain>批量删除</el-button>-->
    <el-input class="marginRB10" v-model="listQuery.order_no" placeholder="请输入订单编号" style="width:200px;"
              clearable></el-input>
    <el-input class="marginRB10" v-model="listQuery.user_code" placeholder="请输入下单人编号" style="width:200px;"
              clearable></el-input>
    <el-select filterable v-model="listQuery.status" class="filter-item marginRB10" placeholder='请选择'
               style="width: 200px;">
      <el-option v-for="item in flagList1" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-select filterable v-model="listQuery.is_auto" class="filter-item marginRB10" placeholder='请选择'
               style="width: 200px;">
      <el-option v-for="item in flagList2" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-select filterable v-model="listQuery.is_comment" class="filter-item marginRB10" placeholder='请选择'
               style="width: 200px;">
      <el-option v-for="item in flagList3" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-select filterable v-model="listQuery.is_settlement" class="filter-item marginRB10" placeholder='请选择'
               style="width: 200px;">
      <el-option v-for="item in flagList4" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-date-picker class="marginRB10" v-model="listQuery.add_start_time" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="下单开始时间" style="width: 200px;"></el-date-picker>
    <el-date-picker class="marginRB10" v-model="listQuery.add_end_time" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="下单结束时间" style="width: 200px;"></el-date-picker>
    <el-date-picker class="marginRB10" v-model="listQuery.save_start_time" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="最后更新开始时间" style="width: 200px;"></el-date-picker>
    <el-date-picker class="marginRB10" v-model="listQuery.save_end_time" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="最后更新结束时间" style="width: 200px;"></el-date-picker>
    <el-button type="primary" @click="searchSubmit" icon="el-icon-search"   class="marginRB10">搜索</el-button>

    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border highlight-current-row
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="order_id" label="订单id"></el-table-column>
      <el-table-column prop="order_no" label="订单号" min-width="220"></el-table-column>
      <el-table-column prop="user_id" label="下单用户id"></el-table-column>
      <el-table-column prop="uid" label="大神用户id"></el-table-column>
      <el-table-column prop="add_time" label="下单时间" min-width="180"></el-table-column>
      <el-table-column prop="status" label="订单状态" min-width="100">

        <template slot-scope="scope">
          <p style="color:#409EFF">{{ scope.row.status === 1 ? '待接单' : '' }}</p>
          <p style="color:#67C23A">{{ scope.row.status === 2 ? '已取消' : '' }}</p>
          <p style="color:#F56C6C">{{ scope.row.status === 3 ? '已拒绝' : '' }}</p>
          <p style="color:#409EFF">{{ scope.row.status === 4 ? '服务中' : '' }}</p>
          <p style="color:#67C23A">{{ scope.row.status === 5 ? '服务完成' : '' }}</p>
          <p style="color:#67C23A">{{ scope.row.status === 6 ? '已结算' : '' }}</p>
          <p style="color:#409EFF">{{ scope.row.status === 7 ? '申诉中' : '' }}</p>
          <p style="color:#409EFF">{{ scope.row.status === 8 ? '申请退款中' : '' }}</p>
          <p style="color:#67C23A">{{ scope.row.status === 9 ? '成功退款' : '' }}</p>
          <p style="color:#F56C6C">{{ scope.row.status === 10 ? '拒绝退款' : '' }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="ulisence_id" label="用户资质id"></el-table-column>
      <el-table-column prop="lisence_id" label="资质id"></el-table-column>
      <el-table-column prop="order_num" label="订单数量"></el-table-column>
      <el-table-column prop="price" label="总价"></el-table-column>
      <el-table-column prop="memo" label="下单备注"></el-table-column>
      <el-table-column prop="rate_platform" label="平台费率"></el-table-column>
      <el-table-column prop="rate_sociaty" label="工会费率"></el-table-column>
      <el-table-column prop="update_time" label="更新时间" min-width="180"></el-table-column>
      <el-table-column prop="sociaty_id" label="工会id"></el-table-column>
      <el-table-column prop="response_type" label="相应类别"></el-table-column>
      <el-table-column prop="response_memo" label="相应详情"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="is_auto" label="操作方式">
        <template slot-scope="scope">
          {{ scope.row.is_auto === 1 ? '人工' : '机器' }}
        </template>
      </el-table-column>
      <el-table-column prop="is_comment" label="是否可以评论">
        <template slot-scope="scope">
          {{ scope.row.is_comment === 1 ? '可以' : '不可以' }}
        </template>
      </el-table-column>
      <el-table-column prop="is_settlement" label="是否已结算">
        <template slot-scope="scope">
          {{ scope.row.is_settlement === 1 ? '否' : '是' }}
        </template>
      </el-table-column>
      <el-table-column prop="demand_id" label="派单厅派单需求id"></el-table-column>
      <el-table-column prop="lisence_name" label="资质名称"></el-table-column>
      <el-table-column prop="user_code" label="下单用户编号"></el-table-column>
      <el-table-column prop="nickname" label="下单用户昵称"></el-table-column>

      <el-table-column min-width="180" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)" plain>日志列表</el-button>
          <el-button
            v-if="scope.row.status === 4 ||scope.row.status === 5 ||scope.row.status === 7 ||scope.row.status === 8 ||scope.row.status === 10"
            type="warning" size="mini" @click="handleUpdate2(scope.row)" plain>退款
          </el-button>
          <!--          <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage"
                    @pagination="getList"/>

    <el-dialog v-dialogDrag title="日志" :visible.sync="dialogFormVisible" @close="handleDialogClose">
      <el-table ref="dataList" :data="form" row-key="id" border highlight-current-row>
        <el-table-column prop="order_id" label="订单id"></el-table-column>
        <el-table-column prop="add_time" label="添加时间"></el-table-column>
        <el-table-column prop="is_auto" label="操作类别">
          <template slot-scope="scope">
            {{ scope.row.is_auto === 1 ? '人工' : '' }}
            {{ scope.row.is_auto === 2 ? '机器' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="订单状态" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.type === 1 ? '待接单' : '' }}
            {{ scope.row.type === 2 ? '已取消' : '' }}
            {{ scope.row.type === 3 ? '已拒绝' : '' }}
            {{ scope.row.type === 4 ? '服务中' : '' }}
            {{ scope.row.type === 5 ? '服务完成' : '' }}
            {{ scope.row.type === 6 ? '已结算' : '' }}
            {{ scope.row.type === 7 ? '申诉中' : '' }}
            {{ scope.row.type === 8 ? '申请退款中' : '' }}
            {{ scope.row.type === 9 ? '成功退款' : '' }}
            {{ scope.row.type === 10 ? '拒绝退款' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="memo" label="操作详细备注"></el-table-column>
        <el-table-column prop="admin_id" label="管理员id"></el-table-column>
        <el-table-column prop="admin_name" label="管理员名称"></el-table-column>

      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog v-dialogDrag title="退款" :visible.sync="dialogFormVisible2">
      <el-form ref="dataForm" :model="form2" label-position="right" label-width="120px"
               style="width: 400px; margin: 0 auto;">
        <el-form-item label="订单id">{{ form2.order_id }}</el-form-item>
        <el-form-item label="订单号">{{ form2.order_no }}</el-form-item>
        <el-form-item label="下单用户id">{{ form2.user_id }}</el-form-item>
        <el-form-item label="大神用户id">{{ form2.uid }}</el-form-item>
        <el-form-item label="下单时间">{{ form2.add_time }}</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible2 = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm2()">
          退款
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {deleteData, listData, logListData, refundData} from '@/api/qualifications/qualificationsOrder'

export default {
  data() {
    return {
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        order_no: undefined,
        user_code: undefined,
        status: undefined,
        is_auto: undefined,
        is_comment: undefined,
        is_settlement: undefined,
        add_start_time: undefined,
        add_end_time: undefined,
        save_start_time: undefined,
        save_end_time: undefined,
      },
      menuList: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      flagList1: [{key: undefined, lab: '全部状态'}, {key: '1', lab: '待接单'}, {key: '2', lab: '已取消'},
        {key: '3', lab: '已拒绝'}, {key: '4', lab: '服务中'}, {key: '5', lab: '服务完成'}, {key: '6', lab: '已结算'},
        {key: '7', lab: '申诉中'}, {key: '8', lab: '申请退款中'}, {key: '9', lab: '成功退款'}, {key: '10', lab: '拒绝退款'}],
      flagList2: [{key: undefined, lab: '全部操作方式'}, {key: '1', lab: '人工'}, {key: '2', lab: '机器'}],
      flagList3: [{key: undefined, lab: '全部评论状态'}, {key: '1', lab: '可以'}, {key: '2', lab: '不可以'}],
      flagList4: [{key: undefined, lab: '全部结算状态'}, {key: '1', lab: '否'}, {key: '2', lab: '是'}],
      form: {
        id: undefined,
        name: undefined,
      },
      form2: {
        id: undefined,
        name: undefined,
      },
      rules: {
        name: [{required: true, message: '请输入名字', trigger: 'blur'}],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList()
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === "" ? undefined : this.listQuery[key]
      }
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total;
        this.listLoading = false
      })
    },
    handleCreate(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      let data = {order_id: row.order_id}
      logListData(data).then(response => {
        this.form = response.data
        this.dialogFormVisible = true
      })
    },
    handleUpdate2(row) {
      this.form2 = []
      this.form2.order_id = row.order_id
      this.form2.order_no = row.order_no
      this.form2.user_id = row.user_id
      this.form2.uid = row.uid
      this.form2.add_time = row.add_time
      //
      // this.dialogStatus = 'update'
      this.dialogFormVisible2 = true
      //
      // this.form = Object.assign({}, this.form)
    },
    handleDelete(row) {
      let data = {ids: row.id}
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          // this.submitOk('删除成功')
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          });
        }
      })
    },
    submitForm() {
      this.$refs['dataForm'].validate(valid => {
        if (valid && this.dialogStatus === 'create') {
          let formData = new FormData();
          for (let item in this.form) {
            this.form[item] === undefined ? '' : formData.append(item, this.form[item]);
          }
          saveData(formData).then(response => {
            if (response.code === 200) {
              this.getList()
              // this.submitOk(response.message)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              });
              this.dialogFormVisible = false
            } else {
              // this.submitFail(response.message)
              this.$message({
                message: response.message,
                type: 'error'
              });
            }
          })
        } else if (valid && this.dialogStatus === 'update') {
          let formData = new FormData();
          for (let item in this.form) {
            this.form[item] === undefined ? '' : formData.append(item, this.form[item]);
          }
          updateData(formData).then(response => {
            if (response.code === 200) {
              this.getList()
              // this.submitOk(response.message)
              this.$notify({
                type: 'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
              });
              this.dialogFormVisible = false
            } else {
              // this.submitFail(response.message)
              this.$message({
                message: response.message,
                type: 'error'
              });
            }
          })
        }
      })
    },
    submitForm2() {
      let data = {order_id: this.form2.order_id}
      refundData(data).then(response => {
        this.getList()
        this.dialogFormVisible2 = false
      })
    },
    resetForm() {
      this.form = {
        id: undefined,
        name: undefined,
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    }
  }
}
</script>
